<script>
import draggable from 'vuedraggable'
import render from './generator/render'

// 中间界面-控件
const layouts = {
	colFormItem(h, element) {
		const { activeItem } = this.$listeners
		let className = element.formId === this.activeId ? 'active' : ''
		return (
			<el-form-item
				label-width={
					element.labelWidth ? `${element.labelWidth}px` : null
				}
				label={element.tag == 'el-button' ? '' : element.label}
				required={element.required}
				class={
					element.class ? className + ' ' + element.class : className
				}
				// style={`width:${element.width}px`}
				nativeOnClick={(event) => {
					activeItem(element)
					event.stopPropagation()
				}}
			>
				<render
					key={element.renderKey}
					conf={element}
					formate={element.formate}
					onInput={(event) => {
						this.$set(element, 'defaultValue', event)
					}}
				/>
				{components.itemBtns.apply(this, arguments)}
			</el-form-item>
		)
	},
	rowFormItem(h, element) {
		const { activeItem } = this.$listeners
		let child = renderChildren.apply(this, arguments)
		return (
			<el-row
				class={element.class}
				nativeOnClick={(event) => {
					activeItem(element)
					event.stopPropagation()
				}}
			>
				<span class="component-name">{element.componentName}</span>
				<draggable
					list={element.children}
					animation={340}
					group={element.group}
					class="drag-wrapper"
				>
					{child}
				</draggable>
			</el-row>
		)
	},
}

// 拷贝&删除按钮
const components = {
	itemBtns(h, element, index, parent) {
		const { copyItem, deleteItem } = this.$listeners
		return [
			<div class="drawing-item-wrapper">
				<span
					class="drawing-item-copy"
					title="复制"
					onClick={(event) => {
						copyItem(element, parent)
						event.stopPropagation()
					}}
				>
					<i class="el-icon-copy-document" />
				</span>
				<span
					class="drawing-item-delete"
					title="删除"
					onClick={(event) => {
						deleteItem(index, parent)
						event.stopPropagation()
					}}
				>
					<i class="el-icon-delete" />
				</span>
			</div>,
		]
	},
}

function renderChildren(h, element) {
	if (!Array.isArray(element.children)) return null
	return element.children.map((el, i) => {
		const layout = layouts[el.layout]
		if (layout) {
			return layout.call(this, h, el, i, element.children)
		}
		return layoutIsNotFound()
	})
}

function layoutIsNotFound() {
	throw new Error(`没有与${this.element.layout}匹配的layout`)
}

export default {
	components: {
		render,
		draggable,
	},
	props: ['element', 'index', 'drawingList', 'activeId'],
	render(h) {
		const layout = layouts[this.element.layout]
		if (layout) {
			return layout.call(
				this,
				h,
				this.element,
				this.index,
				this.drawingList
			)
		}
		return layoutIsNotFound()
	},
}
</script>

<style lang="scss" scoped>
.el-row {
	width: 100%;
	border: 1px dashed #ccc;
	border-radius: 6px;
	padding: 20px 0;
	margin-bottom: 20px;
	position: relative;
	.component-name {
		position: absolute;
		top: 0;
		left: 5px;
		font-size: 12px;
		color: #bbb;
		display: inline-block;
	}
	.drag-wrapper {
		width: 100%;
		min-height: 32px;
		height: 100%;
		&::after {
			display: block;
			content: '';
			clear: both;
		}
		.el-form-item {
			float: left;
		}
	}
}
.el-form-item {
	padding: 12px 10px;
	border-radius: 6px;
	::v-deep.el-form-item__content {
		position: relative;
		.drawing-item-wrapper {
			position: absolute;
			top: -50%;
			right: 0;
			transform: translateY(-25%);
			display: none;
			span {
				display: inline-flex;
				font-size: 10px;
				color: #f56c6c;
				padding: 3px;
				margin-left: 10px;
				border: 1px solid;
				border-radius: 50%;
			}
			span:first-child {
				color: #409eff;
			}
			span:hover {
				background-color: #f56c6c;
				color: #fff;
			}
			span:first-child:hover {
				background-color: #409eff;
				color: #fff;
			}
		}
	}
	&.active {
		background: #f4f6fe;
	}
	&:hover {
		background: #f4f6fe;
		.drawing-item-wrapper {
			display: block;
		}
	}
}
</style>